<template>
  <div class="card">
    <div class="accInfo">
      <div class="font">
        &nbsp;&nbsp;&nbsp;偷偷告诉你，实名认证后宝 贝更易卖出哦~
      </div>
      <div class="img">
        <img src="~assets/userIcon/rightjiantou.png" alt="" />
      </div>
    </div>
    <div class="trade">
      <div class="trade-one"><div>我的交易</div></div>
      <div class="trade-two">
        <div class="myCart">
          <div class="myCart-one">9</div>
          <div class="myCart-one"><p>我发出的</p></div>
        </div>
        <div class="myCart">
          <div class="myCart-one">4</div>
          <div class="myCart-one"><p>我订购的</p></div>
        </div>
        <div class="myCart">
          <div class="myCart-one">2</div>
          <div class="myCart-one"><p>我分享的</p></div>
        </div>
        <div class="myCart">
          <div class="myCart-one">23</div>
          <div class="myCart-one"><p>我收藏的</p></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyCard',
  data () {
    return {}
  }
}
</script>
<style lang="stylus" scoped>
.card {
  margin: (7 / 50)rem (13 / 50)rem 0 (13 / 50)rem;

  .accInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: (34 / 50)rem;
    border-radius: 0.1rem;
    background-color: rgba(66, 129, 240, 100);
    margin-bottom: (11 / 50)rem;
    border: (1 / 50)rem solid rgba(255, 0, 0, 0);

    .font {
      font-size: (12 / 50)rem;
      color: white;
    }

    .img {
      float: right;
      height: (24 / 50)rem;
      width: (24 / 50)rem;
      margin-right: 0.1rem;

      img {
        width: 100%;
      }
    }
  }

  .trade {
    height: (125 / 50)rem;
    border-radius: 0.1rem;
    background: white;

    .trade-one {
      padding-top: 0.1733rem;
      padding-left: 0.1867rem;
      font-size: 0.3067rem;
      font: normal;
      font-family: PingFangSC-bold;
    }
    .trade-two {
      display: flex
      margin-top: 5.5%
      margin-right: (34/375*100)%
      margin-left:  (34/375*100)%
      height: 6.5%
      flex-wrap: nowrap
      justify-content:space-between
      .myCart {
        position relative
        height: 100%
        .myCart-one {
          text-align: center
          height: 50%
          font-size: 0.6rem
          color: black
          p {
            margin-top: 70%;
            font-size: .1733rem
            color: #999898
          }
        }
      }
    }
  }
}
</style>
